<template>
  <div>
    <div class="content">
      <van-icon name="bag-o" />
      <input type="password" v-model="password1" placeholder="设置密码" />
    </div>
    <div class="content">
      <van-icon name="lock" />
      <input type="password" v-model="password2" placeholder="确认密码" />
    </div>
    <div class="btn">
      <van-button
        size="large"
        round
        type="info"
        :color="((password1==password2)&&(password1&&password2))?col[0]:col[1]"
        :disabled="(password1!=password2)"
        @click="update"
      >提交</van-button>
    </div>
  </div>
</template>

<script>
import Api from "../Api";
import qs from "qs";

export default {
  data() {
    return {
      col: ["linear-gradient(to right,#FF8300,#FF5700)", "#9b9b9b"], //登录按钮样式
      password1: "",
      password2: ""
    };
  },
  methods: {
    async update() {
      await Api.my
        .post(
          "/users/updateusers",
          qs.stringify({
            phonenumber: this.$store.state.common.user.phone,
            password: this.password1
          })
        )
        .then(res => {
          if (res.data.code == 1) {
            this.$router.push("/logout");
          }
          window.console.log(res);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  padding: 0 0.32rem;
  background-color: #fff;
  height: 1.333333rem;
  line-height: 1.466667rem;
  border-bottom: 1px solid #f6f6f6;
}
.van-button {
  margin-top: 1.28rem;
}
.van-icon {
  font-size: 0.506667rem;
  margin-right: 0.266667rem;
}
.btn {
  padding: 0 1.066667rem;
}
</style>